<template>
	<div class="editable-select">
		<input ref='input' type="text" class="list-name-for-select" v-model="value" @input="input" @focus="input"
		 :placeholder="placeholder">
		<div class="list-select" ref="select" v-if="visible&&optiotList.length!=0">
			<li class="list_item" v-for="item in optiotList" :class="{'active':value==item&&value!=''}" @click="select(item)">
				{{item}}
			</li>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: ''
			},
			data: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		watch: {
			data(val) {
				this.optiotList = val;
			}
		},
		data() {
			return {
				visible: false,
				value: '',
				optiotList: []
			}
		},
		methods: {
			input(val) {
				this.visible = true;
				this.$emit('onchange', this.value)
			},
			select(item) {
				this.value = item;
				this.visible = false;
			},
			hideSelect(e) {
				if (!this.$el.contains(e.target)) {
					this.visible = false
				}
			}
		},
		mounted() {
			document.removeEventListener('touchstart', this.hideSelect, false);
			document.addEventListener('touchstart', this.hideSelect, false);
		},
		created() {
			this.optiotList = this.data;
		},
		beforeDestroy() {
			document.removeEventListener('touchstart', this.hideSelect, false);
		}
	}
</script>

<style scoped>
	.editable-select {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.list-name-for-select {
		width: 100%;
		height: 100%;
		outline: none;
		border: none;
		background: none;
		padding: 0 0.5rem;
		box-sizing: border-box;
	}

	.list-select {
		width: 100%;
		max-height: 20rem;
		overflow: auto;
		position: absolute;
		top: 100%;
		border: 1px solid #E8E8E8;
		box-sizing: border-box;
		background: #ffffff;
		z-index: 9999;
	}

	.list-select .list_item {
		width: 100%;
		box-sizing: border-box;
		padding: 0.5rem 1rem;
		text-align: left;
		border-bottom: 1px solid #E8E8E8;
	}

	.active {
		background: #36C12D;
	}
</style>
